<template>
  <div>
    <van-tabs v-model="active" sticky @change="tabChange">
      <van-tab title="未提交" name="tab1">
        <van-pull-refresh
          v-model="firstTabLoading"
          :class="$style.refreshContainer"
          @refresh="onRefresh('tab1')"
        >
          <div v-if="unCommitWorkList.length > 0">
            <div
              v-for="item in unCommitWorkList"
              :key="item.id"
              :class="$style.examContainer"
              @click="viewWork(item.id)"
            >
              <div :class="$style.examTextContainer">
                <div :class="$style.examtitle">
                  {{ item.title }}
                </div>
                <div :class="$style.examGrade">本作业共{{ item.exerciseCount }}道试题</div>
                <div :class="$style.examSubmit">
                  {{ item.endTime }}
                </div>
              </div>
            </div>
          </div>
          <van-empty v-else description="暂无数据" />
        </van-pull-refresh>
      </van-tab>

      <van-tab title="已提交" name="tab2">
        <van-pull-refresh
          v-model="secondTabLoading"
          :class="$style.refreshContainer"
          @refresh="onRefresh('tab2')"
        >
          <div v-if="commitWorkList.length > 0">
            <div v-for="item in commitWorkList" :key="item.id" :class="$style.examCommitContainer">
              <div :class="$style.examTextContainer">
                <div :class="$style.examtitle">
                  {{ item.title }}
                </div>
                <div :class="$style.examGrade">本作业共{{ item.exerciseCount }}道试题</div>
                <div :class="$style.examSubmit">
                  {{ item.endTime }}
                </div>
                <hr :class="$style.spliter" />
                <div :class="$style.scorecontainer">
                  <div v-if="item.status == 1" :class="$style.statuslablewaitting">待批改</div>
                  <div v-if="item.status == 2 || item.status == 3">
                    <div v-if="item.scoreResult == 0" :class="$style.scorenagtive">
                      {{ item.score }}分
                    </div>
                    <div v-if="item.scoreResult == 1" :class="$style.scorepositive">
                      {{ item.score }}分
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <van-empty v-else description="暂无数据" />
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Tab, Tabs, PullRefresh, Empty } from 'vant';
import { dateFormat } from '@/helpers/data-transform';

import { GetMyWorkLst } from '@/apis';
export default {
  name: 'Home',
  components: {
    'van-tabs': Tabs,
    'van-tab': Tab,
    'van-pull-refresh': PullRefresh,
    'van-empty': Empty,
  },
  data() {
    return {
      /**第一个tab的loading */
      firstTabLoading: false,
      /**第二个tab的loading */
      secondTabLoading: false,
      unCommitWorkList: [],
      commitWorkList: [],
      active: 'tab1',
      totalPage: 1,
      pageIndex: 1,
      pageSize: 10,
      lessonId: 0,
      // token: '',
    };
  },
  computed: {
    noMore() {
      return this.pageIndex > this.totalPage;
    },
  },

  mounted() {
    this.active = this.$router.history.current.query.tab
      ? this.$router.history.current.query.tab
      : 'tab1';
    var lessonId = this.$router.history.current.query.lessonId; //缓存lessonId
    if (!lessonId) {
      lessonId = sessionStorage.getItem('lessonId');
    } else {
      sessionStorage.setItem('lessonId', lessonId);
    }
    this.lessonId = lessonId;
    this.pageIndex = 1;
    this._getMyWorkLst();
  },
  methods: {
    /**初始化数据 */
    initData() {
      this.unCommitWorkList = [];
      this.commitWorkList = [];
    },
    _getMyWorkLst() {
      // this.token = this.$router.history.current.query.token;
      return GetMyWorkLst({ lessonId: this.lessonId }).then((res) => {
        this.unCommitWorkList = [];
        this.commitWorkList = [];
        res.data &&
          res.data.length > 0 &&
          res.data.forEach((item) => {
            if (item.status == 0) {
              item.endTime = dateFormat('yyyy/MM/dd hh:mm', new Date(item.endTime));
              this.unCommitWorkList.push(item);
            } else {
              item.endTime = dateFormat('yyyy/MM/dd hh:mm', new Date(item.endTime));
              this.commitWorkList.push(item);
            }
          });
        return true;
      });
    },
    viewWork(id) {
      this.$router.push(`/work?id=${id}}`);
    },
    _compareDate(d1, d2) {
      return d1 >= d2;
    },
    /** 下拉刷新 */
    onRefresh(type) {
      if (type === 'tab1') {
        this._getMyWorkLst().then(() => (this.firstTabLoading = false));
        return;
      } else {
        this._getMyWorkLst().then(() => (this.secondTabLoading = false));
      }
    },
    /** tab改变事件 */
    tabChange(name) {
      this.$router.replace(`/onlineWork?tab=${name}`);
    },
  },
};
</script>

<style lang="less" module>
@import '~vant/lib/style/var.less';
@import '~@scf/ding-style-less/var.less';

div::-webkit-scrollbar {
  width: 0;
}

.refreshContainer {
  height: 100%;
  min-height: 80vh;
  padding-bottom: 10px;
}
.examContainer {
  background: #ffffff;
  border-radius: 6px;
  width: 345px;
  margin: 10px auto 0;
  padding: 0 15px;
}
.examCommitContainer {
  background: #ffffff;
  border-radius: 6px;
  width: 345px;
  margin: 10px auto 0;
  padding: 0 15px;
  height: 3.5rem;
}

.examTextContainer {
  padding: 15px 0;
  height: 100px;
}

.examtitle {
  font-weight: 600;
  font-size: 14px;
  color: #333333;
}

.examGrade {
  padding: 7px 0;
  font-size: 12px;
  color: #666666;
}

.examSubmit {
  font-size: 12px;
  color: #969799;
}

.spliter {
  margin: 10px 0;
  border: 1px dashed #f0f0f0;
}
.statuslablewaitting {
  color: #fe952c;
  font-size: 14px;
  line-height: 14px;
  padding: 4px;
  width: 50px;
}
.scorecontainer {
  display: flex;
}
.scorepositive {
  color: #44b66c;
  font-size: 14px;
  line-height: 14px;
  padding: 4px;
  width: 50px;
}
.scorenagtive {
  color: #ff081f;
  font-size: 14px;
  line-height: 14px;
  padding: 4px;
  width: 50px;
}
</style>
